<template>
  <div class="search">
    <Card>
      <div class="totalCount">
        <p class="countTitle">合计</p>
        <div class="totalList">
          <p>
            用户订单焕贝额：<span>{{ allData.flowPrice }}</span>
          </p>
          <p>
            用户服务费（焕贝）：<span>{{ allData.commission }}</span>
          </p>
          <p>
            天使合伙人（两类）分佣焕贝额：<span>{{ allData.tsMoney }}</span>
          </p>
        </div>
      </div>
      <Row @keydown.enter.native="handleSearch">
        <Form ref="searchForm" :model="searchForm" inline :label-width="75" class="search-form">
          <Form-item label="时间">
            <DatePicker v-model="outSelectDate" type="month" format="yyyy-MM" clearable @on-change="outSelectDateRange"
              placeholder="选择时间" style="width: 200px">
            </DatePicker>
          </Form-item>
          <Button @click="handleSearch" class="search-btn" type="primary" icon="ios-search">搜索</Button>
          <Button class="search-btn" type="primary" @click="handleReset">重置</Button>
        </Form>
      </Row>
      <Table :loading="loading" border :columns="columns" class="mt_10" :data="data" ref="table"></Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
          @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50, 100]" size="small" show-total
          show-elevator show-sizer></Page>
      </Row>
    </Card>
  </div>
</template>

<script>
  import {
    GetCommissionDistributionSale,
    GetCommissionDistributionSaleAll
  } from "@/api/financial.js";

  export default {
    name: "saleServeFee",
    data() {
      return {
        // 表格的表头以及内容
        fields: {
          会员昵称: "name",
          注册手机号: {
            field: "mobile",
            callback: (value) => {
              return "&nbsp;" + value;
            },
          },
          级别: "levelName",
          区域: "region",
          推广人手机号: {
            field: "tjMobile",
            callback: (value) => {
              return "&nbsp;" + value;
            },
          },
          会员费_会员费总额_人民币: {
            field: "dkfXj",
            callback: (value) => {
              return "&nbsp;" + value;
            },
          },
          会员费_会员费总额_焕贝: {
            field: "dkfHb",
            callback: (value) => {
              return "&nbsp;" + value;
            },
          },
          充值钱包_收入_现金充值总额: {
            field: "czSrXj",
            callback: (value) => {
              return "&nbsp;" + value;
            },
          },
          充值钱包_收入_兑换焕贝总额: {
            field: "czSrHb",
            callback: (value) => {
              return "&nbsp;" + value;
            },
          },
          充值钱包_收入_转入: {
            field: "czSrZr",
            callback: (value) => {
              return "&nbsp;" + value;
            },
          },
          充值钱包_支出_消费焕贝总额: {
            field: "czZcXf",
            callback: (value) => {
              return "&nbsp;" + value;
            },
          },
          充值钱包_焕贝余额: {
            field: "czYe",
            callback: (value) => {
              return "&nbsp;" + value;
            },
          },
        },
        loading: true, // 表单加载状态
        searchForm: {
          // 请求参数
          pageNumber: 1,
          pageSize: 10,
          order: "desc",
          searchTime: ''
        },
        outSelectDate: '', // 起止时间
        columns: [{
            title: "用户",
            align: "center",
            children: [{
                title: "订单号",
                key: "sn",
                align: "center",
                width: '250'
              },
              {
                title: "订单支付时间",
                key: "createTime",
                align: "center",
                width: '150'
              },
              {
                title: "手机号",
                key: "mobile",
                align: "center",
                width: '150'
              },
              {
                title: "用户昵称",
                key: "realName",
                align: "center",
                width: '100'
              },
              {
                title: "身份类型",
                key: "roleName",
                align: "center",
                width: '100'
              },
              {
                title: "区域",
                key: "locationName",
                align: "center",
                width: '200'
              },
              {
                title: "级别/角色",
                key: "gradeName",
                align: "center",
                width: '100'
              },
              {
                title: "分佣类型",
                key: "typeName",
                align: "center",
                width: '100'
              },
              {
                title: "订单焕贝额",
                key: "flowPrice",
                align: "center",
                width: '100'
              },
              {
                title: "服务费（焕贝）",
                key: "commission",
                align: "center",
                width: '150'
              },
            ],
          },
          {
            title: "天使合伙人（两类）",
            align: "center",
            children: [{
                title: "手机号",
                key: "tsMobile",
                align: "center",
                width: '150'
              },
              {
                title: "用户昵称",
                key: "tsRealName",
                align: "center",
                width: '100'
              },
              {
                title: "店铺昵称",
                key: "tsStoreName",
                align: "center",
                width: '100'
              },
              {
                title: "分佣焕贝额",
                key: "tsMoney",
                align: "center",
                width: '100'
              },
            ],
          },
        ],
        data: [], // 表单数据
        total: 0, // 表单数据总数
        allData: {}, //合计数据
      };
    },
    methods: {
      // 重置
      handleReset() {
        this.outSelectDate = "";
        this.searchForm = {
          // 请求参数
          pageNumber: 1,
          pageSize: 10,
          order: "desc",
          mobile: "",
          tjMobile: "", //推广人手机号
          startTime: "",
          endTime: "",
          regionId: [],
        };
        this.$refs.region.addr = [];
        this.getData();
      },
      // 起止时间从新赋值
      outSelectDateRange(v) {
        if (v) {
          this.searchForm.searchTime = v
        }
      },
      // 选中的地址
      selectedRegion(val) {
        this.searchForm.regionId = val[0];
      },
      // 分页 改变页码
      changePage(v) {
        this.searchForm.pageNumber = v;
        this.getData();
      },
      // 分页 改变页数
      changePageSize(v) {
        this.searchForm.pageSize = v;
        this.searchForm.pageNumber = 1;
        this.getData();
      },
      // 搜索
      handleSearch() {
        this.searchForm.pageNumber = 1;
        this.searchForm.pageSize = 10;
        this.getData();
      },
      //查询会员列表
      getData() {
        GetCommissionDistributionSale(this.searchForm).then((res) => {
          if (res.result) {
            this.loading = false;
            this.data = [];
            this.data = res.result.records;
            this.total = res.result.total;
            this.getDataAll()
          }
        });
      },
      getDataAll() {
        GetCommissionDistributionSaleAll(this.searchForm).then(res => {
          this.allData = res.result
        })
      }
    },
    mounted() {
      this.getData();
    },
  };
</script>
<style lang="scss" scoped>
  .export-excel-wrapper {
    margin-left: 10px;
  }

  /deep/ .ivu-table-wrapper {
    width: 100%;
  }

  /deep/ .ivu-card {
    width: 100%;
  }

  .face {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }

  .item {
    width: 350px !important;
    display: flex;

    >* {
      margin: 0 4px;
    }
  }

  .totalCount {
    width: 100%;
    height: auto;

    .countTitle {
      width: 100%;
      height: auto;
      font-weight: bold;
      font-size: 24px;
    }

    .totalList {
      display: flex;
      align-items: center;

      p {
        margin-right: 20px;
        font-size: 18px;

        span {
          margin-left: 10px;
        }
      }
    }
  }
</style>
